@import "../vars.scss";

.vt-button {
  display: flex;
  align-items: center;
  outline: none;
  background-color: var(--vt-button-bg-color);
  color: var(--vt-button-text-color);
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  border-color: var(--vt-button-border-color);
  border-radius: 5px;
  cursor: pointer;
  padding: 8px 15px;
  font-size: var(--vt-font-size-base);
  line-height: 1;
  text-wrap: nowrap;
  overflow: hidden;
}

.vt-button {
  &__icon {
    margin-right: 6px;
  }
}

// .vt-button__container {
@each $type, $color in $colors {
  .vt-button--#{$type} {
    // 背景色
    --vt-button-bg-#{$type}:var(--vt-color-#{$type});
    --vt-button-bg-color: var(--vt-button-bg-#{$type});
    // 文字
    --vt-button-text-#{$type}:var(--vt-color-#{$type}-light-9);
    --vt-button-text-color:var(--vt-button-text-#{$type});
    // 边框
    --vt-button-border-#{$type}:var(--vt-button-bg-#{$type});
    --vt-button-border-color:var(--vt-button-border-#{$type});

    &:hover {
      --vt-button-bg-#{$type}:var(--vt-color-#{$type}-light-3);
    }

    &.is-plain {
      --vt-button-bg-#{$type}:var(--vt-color-#{$type}-light-9);
      --vt-button-text-#{$type}:var(--vt-color-#{$type});
      --vt-button-border-#{$type}:var(--vt-color-#{$type});

      &.is-disabled {
        --vt-button-disabled-bg-color:var(--vt-color-#{$type}-light-9);
        --vt-button-text-color: var(--vt-color-#{$type}-light-5);
      }

      &:hover {
        --vt-button-bg-#{$type}:var(--vt-color-#{$type});
        --vt-button-text-#{$type}:var(--vt-color-#{$type}-light-9);
        --vt-button-border-#{$type}:var(--vt-button-bg-#{$type});
      }
    }

    &.is-round {
      --vt-button-radius-round: 20px;
      border-radius: var(--vt-button-radius-round)
    }

    &.is-circle {
      width: 32px;
      padding: 8px;
      border-radius: 50%;
    }

    &.is-disabled,
    &.is-loading {
      cursor: not-allowed;
      --vt-button-disabled-bg-color:var(--vt-color-#{$type}-light-5);
      background-color: var(--vt-button-disabled-bg-color);
      --vt-button-text-color: var(--vt-color-white);

      --vt-button-border-color: var(--vt-button-disabled-bg-color);

      &:hover {
        // --vt-button-bg-#{$type}:var(--vt-button-bg-#{$type});
        --vt-button-text-#{$type}:var(--vt-color-#{$type});
      }
    }

  }



}